<template>
    <div class="exchange">

        <!--S顶部-->
        <div id="header" ref="header">
            可兑换余额{{exchange_total}}元
        </div>
        <!--E顶部-->

        <!--S主体-->
        <cube-scroll class="scroll" ref="scroll" :style="{height:scroll_height+'px'}" :options="scroll_options">
            <div id="ul" v-if="list.length > 0">
<!--                <div class="li">-->
<!--                    <img class="icon" src="https://www.baidu.com/img/bd_logo1.png" />-->
<!--                    <div class="right">-->
<!--                        <p class="name">名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</p>-->
<!--                        <p class="price">价值:203.33</p>-->
<!--                        <p class="exchange_number">已兑换:20</p>-->
<!--                        <p class="number">数量:100</p>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="li" v-for="item in list" v-bind:key="item.treasure_id">
                    <img class="icon" :src="item.icon" />
                    <div class="right">
                        <p class="name">{{item.name}}</p>
                        <p class="price">价值:{{toDecimal2(item.money)}}</p>
                        <p class="exchange_number">已兑换:{{item.exchange}}</p>
                        <p class="number">数量:{{item.number}}</p>
                    </div>
                </div>
            </div>
            <empty v-else>您还没有开到任何宝藏哦</empty>
        </cube-scroll>
        <!--E主体-->

        <!--S底部-->
        <div id="footer" ref="footer">
            <cube-button class="button" :primary="true">
                <router-link class="a" :to="'/member/wallet'">
                    <svg class="self-iconfont" aria-hidden="true">
                        <use xlink:href="#icon-qianbao1"></use>
                    </svg>
                    <span>我的钱包</span>
                </router-link>
            </cube-button>
            <cube-button class="button" :primary="true" @click="exchange">
                <svg class="self-iconfont" aria-hidden="true">
                    <use xlink:href="#icon-icon_shangpinduihuan"></use>
                </svg>
                <span>兑换余额</span>
            </cube-button>
        </div>
        <!--E底部-->

    </div>
</template>

<script>
import empty from "../../components/empty/Empty.vue";
export default {
    name:"exchange",
    data(){
        return {
            scroll_height:document.documentElement.clientHeight,
            activity_id:0,  //活动id
            //滚动参数
            scroll_options:{
                scrollbar:true
            },
            list:[]
        };
    },
    components:{
      empty
    },
    computed:{
      //可兑换总额
      exchange_total(){
          var exchange_total = 0;
          this.list.forEach((item)=>{
              var number = item.number - item.exchange;
              if(number > 0){
                  exchange_total += number * item.money;
              }
          });
          return this.toDecimal2(exchange_total);
      }
    },
    created(){
        this.activity_id = this.$route.params.activity_id;
        this.getList();
    },
    mounted(){
        setTimeout(()=>{
            this.scroll_height = document.documentElement.clientHeight - this.$refs.footer.getBoundingClientRect().height;
        },100);
    },
    methods:{
        //获取列表
        getList(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"memberTreasure",
                doing:"getList",
                type:1,
                source:1,
                uid:this.$sysinfo.uid,
                activity_id:this.activity_id
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.list = res.data.data;
                    }
                    this.$nextTick(()=>{
                        this.$refs.scroll.refresh();
                    });
                })
                .catch();
        },
        //补齐进去格式的小数
        toDecimal2(x){
            let f = parseFloat(x);
            if (isNaN(f)) {
                return false;
            }
            f = Math.round(x*100)/100;
            let s = f.toString();
            let rs = s.indexOf(".");
            if (rs < 0) {
                rs = s.length;
                s += ".";
            }
            while (s.length <= rs + 2) {
                s += "0";
            }
            return s;
        },
        //兑换
        exchange(){
            this.$createDialog({
                type:"confirm",
                content:"确定要将宝藏兑换成余额吗？",
                icon:"cubeic-question",
                onConfirm:()=>{
                    this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                        pages:"exchange",
                        doing:"exchange",
                        uid:this.$sysinfo.uid,
                        activity_id:this.activity_id
                    }))
                        .then((res)=>{
                            if(res.data.status == "success"){
                                this.$createToast({
                                    time:1000,
                                    txt:"兑换成功",
                                    type:"correct",
                                    mask:true
                                }).show();
                                this.getList();
                            }else{
                                this.$createToast({
                                    time:1000,
                                    txt:res.data.err_msg,
                                    type:"error",
                                    mask:true
                                }).show();
                            }
                        })
                        .catch();
                }
            }).show();
        }
    }
};
</script>

<style scoped>
    .exchange{
        background: #fff;
        height:100%;
    }
    .scroll{
        position: absolute;
        top:50px;
        width:100%;
        background: #fff;
    }
    #header{
        position: fixed;
        top:0;
        left:0;
        width:375px;
        height:50px;
        line-height: 50px;
        text-align: center;
        background: #FC9153;
        font-size:16px;
        color:#fff;
    }
    div#ul{
        padding:0 10px;
        box-sizing: border-box;
    }
    div.li{
        padding-top: 10px;
        height:100px;
        box-sizing: border-box;
        font-size:14px;
        color:#000;
        border-bottom: 1px solid #eee;
    }
    div.li .icon{
        display: block;
        object-fit: contain;
        width:80px;
        height:80px;
        float: left;
        border:1px solid #eee;
        box-sizing: border-box;
    }
    div.li .right{
        position: relative;
        float:right;
        width: 270px;
        height:80px;
        padding-top:5px;
        box-sizing: border-box;
    }
    div.li .right .name{
        width: 100%;
        font-size:16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 5px;
    }
    div.li .right .exchange_number{
        position: absolute;
        left:0;
        bottom: 5px;
    }
    div.li .right .number{
        position: absolute;
        right:0;
        bottom: 5px;
    }
    #footer{
        position: fixed;
        bottom: 0;
        width:375px;
    }
    #footer .button{
        width:50%;
        float: left;
    }
    #footer .button span{
        position: relative;
        top:-16px;
        left:3px;
    }
    #footer .button:nth-of-type(1){
        border-right: 1px solid #fff;
    }
    #footer .a{
        color:#fff;
    }
    .self-iconfont{
        position: relative;
        top:-6px;
        width:30px;
        height:30px;
        display: inline-block;
    }
</style>
